<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-model="http://www.w3.org/1999/xhtml"
      xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../js/vue/vue.js"></script>
    <script src="../../js/jquery/jquery.js"></script>
    <script src="../../js/jquery-form/jquery.form.js"></script>


</head>
<body>
<div id="app">
    <a href="input.html">添加</a>
    <ul>
        <li v-for="(emp , index) in emps" >{{emp.id}}--{{emp.name}}--{{emp.age}}
            <a v-bind:href="'input.html?id='+emp.id">编辑</a>
            <button id="btn" @click="deleteMe($event,emp.id)">删除</button>
        </li>
    </ul>
</div>
<script>

    var app = new Vue({
        el:'#app',
        data:{
            emps:[
            ]
        },
        methods:{
            deleteMe:function (e,id) {
                $.ajax({
                    url:"http://localhost:8080/emps/delete",
                    data:{id:id},
                    type:"delete",
                    success:function (data) {
                         if(data.success){
                            window.location.reload()
                         }
                    }
                })
            }
        },
        mounted:function () {
            var _this=this;
            $.get("http://localhost:8080/emps/list",{},function (data) {
                _this.emps=data
            })
        }
    })
</script>
</body>
</html>